<template>
  <Modal :value="showModal" title="修改角色权限" @on-cancel="closeModal" :footer-hide="true">
    <Form ref="JForm" :model="formData" :rules="rules">
      <FormItem prop="name" label="权限名称">
        <Input v-model="formData.name" placeholder="请输入角色权限等级的名称"></Input>
      </FormItem>
      <Button type="primary" @click="editLevel">修改</Button>
    </Form>
  </Modal>
</template>

<script>
import {mapActions} from 'vuex'

export default {
  props: {
    level: {
      type: Object,
      default: () => { }
    },
    showModal: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formData: {
        name: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '用户权限名称不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    'showModal' (val) {
      val && (this.formData.name = this.level.name)
    }
  },
  methods: {
    editLevel () {
      this.$refs.JForm.validate((valid) => {
        if (valid) {
          this._editLevel()
          this.closeModal()
          this.$emit('reloadTable')
        }
      })
    },
    closeModal () {
      this.$emit("closeModal")
    },
    async _editLevel () {
      const url = '/editlevel'
      const actionsUser = this.$store.state.userModule.user.username
      const res = await this.GET_DATA({
        dataUrl: url,
        id: this.level.id,
        name: this.formData.name,
        actionsUser: actionsUser,
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
      }
    },
    ...mapActions({
      GET_DATA: '_GET_DATA'
    })
  }
}
</script>